import React from 'react'
import {Link} from 'react-router'

import ReactPaginate from 'react-paginate'

import '../public/css/loanlist.scss'
import Api from "../router/Api";
import requestSign from "../public/js/requestSign";

class LoanList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            loanLists:[],
            pageCount:10,
            selected:0,
            paginate:false
        }
    }
    componentWillMount(){
        const _this = this;
        Api.getTimeStamp()
            .then(function (res) {
                const token = sessionStorage.getItem('token');
                const timestamp = res.data.data.timestamp;
                const pageSize = 13;
                const pageNumber = _this.state.selected+1;
                const sign = requestSign({timestamp,token,pageSize,pageNumber});
                console.log(token);
                console.log(timestamp);
                console.log(sign);
                Api.getborrowList({params:{
                    token:token,
                    timestamp:timestamp,
                    sign:sign.sign,
                    pageSize:pageSize,
                    pageNumber:pageNumber
                }})
                    .then(function (res) {
                        console.log(res);
                        if(res.data.success){
                            console.log(typeof (res.data.data.rows[0].amount));
                            if(res.data.total>1 && res.data.data.rows.length>0){
                                _this.setState({
                                    paginate:ture,
                                    loanLists:res.data.data.rows,
                                    pageCount:_this.data.total,
                                })
                            }else{

                            }
                        }
                    })
            })
            .catch(function (err) {
                console.log(err);
            })
    }
    handlePageClick(data){
        const _this = this;
        _this.setState({
            selected:data.selected
        });
        Api.getTimeStamp()
            .then(function (res) {
                const token = sessionStorage.getItem('token');
                const timestamp = res.data.data.timestamp;
                const pageSize = 13;
                const pageNumber = _this.state.selected+1;
                const sign = requestSign({timestamp,token,pageSize,pageNumber});
                console.log(token);
                console.log(timestamp);
                console.log(sign);
                Api.getborrowList({params:{
                        token:token,
                        timestamp:timestamp,
                        sign:sign.sign,
                        pageSize:pageSize,
                        pageNumber:pageNumber
                    }})
                    .then(function (res) {
                        console.log(res);
                        if(res.data.success){
                            if(res.data.data.total>0 && res.data.data.rows.length>0){
                                _this.setState({
                                    paginate:true,
                                    loanLists:res.data.data.rows,
                                    pageCount:Math.ceil(res.data.data.total/13),
                                })
                            }else{

                            }
                        }
                    })
            })
            .catch(function (err) {
                console.log(err);
            })
    }
    render(){
        const loanlists = this.state.loanLists.map((loanlist,i)=>
            <li key={i}>
                <span className="w120">{loanlist.title}</span>
                <span className="w80">{loanlist.amount}</span>
                <span className="w80">{loanlist.rdsum ? loanlist.rdsum : 0}</span>
                <span className="w80">{loanlist.duration}</span>
                <span className="w126">{loanlist.repaymentTypeName}</span>
                <span className="w56">{loanlist.rdcount}</span>
                <span className="w42">{loanlist.statusName}</span>
                <span className="w28"><Link to={"/details/"+loanlist.id}>详情</Link></span>
            </li>
        )
        return(
            <div className="loanlist">
                <h3>我的借款</h3>
                <div>
                    <ul className="clearFix">
                        <li>
                            <span className="w120">借款标的</span>
                            <span className="w80">借款金额(元)</span>
                            <span className="w80">应还本息(元)</span>
                            <span className="w80">借款期限(天)</span>
                            <span className="w126">还款方式</span>
                            <span className="w56">还款周期</span>
                            <span className="w42">状态</span>
                            <span className="w28">操作</span>
                        </li>
                    </ul>
                    <ul>{loanlists}</ul>
                </div>

                <div style={{margin:"37px auto 0 auto",height:"26px"}}>
                    <div className={this.state.paginate ? "" : "hide"}>
                        <ReactPaginate className="clearFix"
                                       previousLabel={"<"}
                                       nextLabel={">"}
                                       breakLabel={<a href="">...</a>}
                                       breakClassName={"break-me"}
                                       pageCount={this.state.pageCount}
                                       marginPagesDisplayed={2}
                                       pageRangeDisplayed={1}
                                       onPageChange={this.handlePageClick.bind(this)}
                                       containerClassName={"pagination"}
                                       subContainerClassName={"pages pagination"}
                                       activeClassName={"active"}
                                       initialPage={this.state.selected}
                        />
                    </div>
                </div>
            </div>
        )
    }
}

export default LoanList